<template>
  <a-row>
    <a-col>
      <a-card :bordered="false" style="margin-bottom: 10px">
        <!-- 查询区域 -->
        <div class="table-page-search-wrapper">
          <a-form-model layout="inline" ref="ruleForm" :model="form">
            <z-form-item
              :datas="fieldArr"
              :form="form"
              :gutter="24"
              :toggle="toggleSearchStatus"
              @change="changeSearchForm"
            >
              <a-col :span="8" slot="submit-action">
                <a-space :size="6">
                  <a-button type="primary" icon="search" @click="onQuery">查询</a-button>
                  <a-button icon="reload" @click="onResetForm">重置</a-button>
                  <!--<a @click="toggleSearchStatus = !toggleSearchStatus">
                    {{ toggleSearchStatus ? '收起' : '展开' }}
                    <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
                  </a>-->
                </a-space>
              </a-col>
            </z-form-item>
          </a-form-model>
        </div>
      </a-card>
      <a-card :bordered="false">
        <!-- 表格展示 -->
        <div class="table-page-content">
          <z-table
            ref="table"
            rowKey="id"
            :showAlert="false"
            :showSelection="true"
            :loading="loading"
            :columns="columns"
            :dataSource="pageData"
            @selectedRow="onSelectedRow"
            @change="onTableChange"
          >
            <!--操作-->
            <template slot="action" slot-scope="text, record">
              <a-button @click="onDetail('数据填报详情', record)" type="link" style="padding: 0">详情</a-button>
            </template>
          </z-table>
        </div>
      </a-card>
    </a-col>
    <FillingProcess ref="fillingProcess" :isInterview="true" />
  </a-row>
</template>

<script>
import FillingProcess from './components/fillingProcess'

import Api from '@/api/sjsk/performanceService'
import { getDictItemsFromCache } from '@/api/api'
import moment from 'moment'

export default {
  components: {
    FillingProcess,
  },
  data() {
    return {
      moment,
      labelCol: { span: 8 },
      wrapperCol: { span: 16 },
      loading: false,
      visible: false,
      isDisabled: true,
      checkList: [],
      form: {},
      handleModalTitle: null,
      /* 查询折叠 */
      toggleSearchStatus: false,
      fieldArr: [
        { label: '计划名称', prop: 'planName', tagType: 'input', span: 6 },
        { label: '计划编号', prop: 'planNo', tagType: 'input', span: 6 },
        { label: '考核类型', prop: 'assessType', tagType: 'dict-select', dictOptions: getDictItemsFromCache('examinType'), span: 6 },
        { label: '考核时间', prop: 'time', tagType: 'range-picker', format: 'YYYY-MM-DD', span: 6 },
      ],
      toggle: true,
      columns: [
        {
          title: '序号',
          dataIndex: 'assessSort',
          width: 60,
          align: 'center',
          customRender: (text, record, index) =>
            `${(this.pageFilter.pageNo - 1) * this.pageFilter.pageSize + (index + 1)}`
        },
        {
          title: '计划编号',
          align: "center",
          dataIndex: 'planNo'
        },
        {
          title: '计划名称',
          align: "center",
          dataIndex: 'planName',
        },
        {
          title: '考核类型',
          align: "center",
          dataIndex: 'assessType',
          customRender: (text, record, index) =>
            `${this.setTittle(record)}`
        },
        {
          title: '考核周期',
          align: "center",
          dataIndex: 'assessCycle'
        },
        {
          title: '考核时间',
          align: "center",
          dataIndex: 'assessTime'
        },
        {
          title: '下发单位',
          align: 'center',
          dataIndex: 'issuedUnit'
        },
        {
          title: '考核对象',
          align: "center",
          dataIndex: 'assessUser'
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: "center",
          scopedSlots: { customRender: 'action' },
        }
      ],
      pageFilter: {
        pageNo: 1,
        pageSize: 10,
      },
      pageData: {},
    }
  },
  created() { },
  async mounted() {
    this.onQuery()
  },

  methods: {
    setTittle(val) {
      return this.$filterDictTextByCache('examinType', val.assessType)  //现在字典中对应的文字，是全局函数
    },
    onDetail(_title, _row) {
      this.$refs.fillingProcess.show(_title, _row)
    },

    onQuery() {
      this.pageFilter.pageNo = 1
      this.refreshTable()
    },

    onResetForm() {
      this.form = {}
      this.pageFilter.pageNo = 1
      this.pageFilter.pageSize = 10
      this.refreshTable()
    },

    onSelectedRow(list) {
      this.checkList = list
      this.isDisabled = list.length <= 0
    },

    onTableChange(pagination, pageFilter, sorter) {
      let keyMap = { currentPage: 'pageNo' }
      let paginations = Object.keys(pagination).reduce((newData, key) => {
        let newKey = keyMap[key] || key
        newData[newKey] = pagination[key]
        return newData
      }, {})
      this.pageFilter = Object.assign({}, this.pageFilter, paginations)
      this.refreshTable()
    },

    refreshTable() {
      let { time, ...dataParam } = this.form
      let form = Object.assign({}, dataParam, this.pageFilter)
      this.loading = true
      Api.getDataFillList(form)
        .then((res) => {
          if (res.success) {
            this.pageData = res.result ? res.result : {}
            this.$refs.table.onClearRowKeys()
          } else {
            this.$message.error(res.message)
          }
        })
        .finally(() => {
          this.loading = false
        })
    },

    changeSearchForm(prop, date) {
      if (prop === 'time') {
        this.$set(this.form, 'assessTimeStart', date[0])
        this.$set(this.form, 'assessTimeEnd', date[1])
      }
    },
  },
}
</script>
<style lang="less" scoped>
.topBox /deep/.ant-row {
  margin-bottom: 0;
}

/deep/.ant-col-7 {
  width: 28%;
}

/deep/.ant-col-4 {
  width: 16%;
}
</style>
